<template>
  <div class="page-marketing-distribution">
    <el-tabs @tab-click="hanldeClick">
      <el-tab-pane :label="$t('user.distributorManagement')">
        <DistributionUserBasic />
      </el-tab-pane>
      <el-tab-pane :label="$t('user.distributorAudit')">
        <DistributionAuditing />
      </el-tab-pane>
      <el-tab-pane :label="$t('user.relationshipSearch')">
        <DistributionBind />
      </el-tab-pane>
      <el-tab-pane :label="$t('user.blockingRecords')">
        <DistributionBan ref="banRef" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import DistributionUserBasic from './components/distribution-user-basic.vue'
import DistributionAuditing from './components/distribution-auditing.vue'
import DistributionBind from './components/distribution-bind.vue'
import DistributionBan from './components/distribution-ban.vue'

const banRef = ref(null)
const hanldeClick = (el) => {
  nextTick(() => {
    if (Number(el.index) === 3) {
      banRef.value?.getDataList()
    }
  })
}
</script>
